<template>
<div class="asset" ref="asset">
  <component-header :title="title" :path="path" :time="selectedTimeIndex" :page="page"></component-header>
  <ul id="topTimePick" class="timePick" v-show="showTimePick">
    <li v-for="item,index in times" :class="{'active':index==selectedTimeIndex}" @click="chooseTime(item,index)" v-text="item.text"></li>
  </ul>

  <zcfx-loadmore :top-method="loadTop" :auto-fill="false" ref="loadmore">
    <div class="main">
      <profit :time="selectedTimeIndex" :total-profit="totalProfit" :assetStat = 'assStat' @showmodal="showModal">
        <ul class="timePick" v-show="!showTimePick">
          <li v-for="item,index in times" :class="{'active':index==selectedTimeIndex}" @click="chooseTime(item,index)" v-text="item.text"></li>
        </ul>
      </profit>
      <return-rate :time="selectedTimeIndex" :assetStat = 'assStat'></return-rate>
      <my-asset :fathertime="selectedTimeIndex" :asset-data="assetData" :status="assetStatus" :assetStat = 'assStat'></my-asset>
      <pro-analysis :fathertime="selectedTimeIndex" :assetStat = 'assStat'></pro-analysis>
      <router-link :to="{path:'/pages/Stock',query:{status:'1'}}" @click.native='skip()'>
        <div class="container-center white">
          <div class="btn orange">查看持仓盈亏</div>
        </div>
      </router-link>

      <my-label :fathertime="selectedTimeIndex" :assetStat = 'assStat'></my-label>
      <stock-ope :fathertime="selectedTimeIndex" class="showBottom" :assetStat = 'assStat'></stock-ope>
    </div>
  </zcfx-loadmore>
  
  <div :class="[{'modal':true},{'modal-hidden':fadeAnimation}]" v-show="activeModal">
    <div class="modal-dialog">
      <div class="modal-title">
        <div class="title-text">
          小君提示
          <img src="~@/assets/images/close.png" @click="closeModal">
        </div>
      </div>
      <div class="modal-content">
        <div class="content-text">盈亏金额为扣除交易费用后的结果。</div>
      </div>
      <div class="modal-btn" @click="closeModal">我知道了</div>
    </div>
  </div>
  <component-footer :page="page"></component-footer>
</div>
</template>

<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
import LoadMore from '@/components/common/LoadMore'
import Profit from './asset/Profit'
import ReturnRate from './asset/ReturnRate'
import MyAsset from './asset/MyAsset'
import ProAnalysis from './asset/ProAnalysis'
import MyLabel from './asset/MyLabel'
import StockOpe from './asset/StockOpe'
import RemoteDAO from '@/common/remoteDAO'
import constant from '@/common/constant'
import Cache from '@/common/cache'
import {
  mapState
} from 'vuex'
import Jquery from 'jquery'

export default {
  data() {
    return {
      page: 0,
      title: '资产分析',
      path: '/pages/Asset',
      selectedTimeIndex: null,
      jumpStatus: 0,
      times: constant.TimeTabData,
      totalProfit: '',
      assetData: [],
      assetStatus: 'exhibition',
      timeEvent: ['002007', '002008', '002009', '002010'],
      timeNum: 0,
      assStat:null,
      activeModal:false,
      fadeAnimation:false,
      showTimePick:true
    }
  },
  created() {
    this.selectedTimeIndex = this.$store.state.selectedTime;
  },
  mounted() {
    TDAPP.onEvent('002027', '');
    TDAPP.send();

    let fontSizeString = $('html').css('font-size');
    let numString = fontSizeString.split('').splice(0, fontSizeString.length - 2).join('');
    let num = parseFloat(numString);

    let myHref = window.location.href
    if (myHref.indexOf('location=lcyk') != -1) {
      $(document).scrollTop(2450 * num / 75)
    } else if (myHref.indexOf('location=zctj') != -1) {
      $(document).scrollTop(1850 * num / 75)
    }

    if (this.$store.state.scrollTop == 1) {
      this.$store.dispatch('setScrollTop', 0);
      $(document).scrollTop(3450 * num / 75);
    }

    this.scrollFunction()
    window.addEventListener('scroll',this.scrollFunction)

    this.fetchData()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.scrollFunction)
  },
  methods: {
    loadTop() {
      Cache.clear();
      this.assStat == 0? this.assStat = 1 : this.assStat = 0;
      this.$refs.loadmore.onTopLoaded();
    },

    loadBottom() {
      this.$refs.loadmore.onBottomAllLoaded()
    },
    skip() {
      TDAPP.onEvent('002015', '');
      TDAPP.send();
    },
    chooseTime(item, index) {
      if (this.timeNum != index) {
        TDAPP.onEvent(this.timeEvent[index], '');
        TDAPP.send();
      }
      this.timeNum = index

      this.selectedTimeIndex = index;

      this.$store.dispatch('setSelectedTime', index);

      this.$nextTick(function() {
        this.fetchData();
      })
    },
    fetchData() {
      this.callZL13100007();
    },
    callZL13100007() {
      RemoteDAO.callZL13100007({
        "pagenum": constant.TimeTabData[this.selectedTimeIndex].num,
        "recent": constant.TimeTabData[this.selectedTimeIndex].name
      }, (result) => {
        if (result.error != '1') {
          let data = result.data;
          let bigdata = JSON.parse(data).body[0].bigdata;
          let specData = JSON.parse(bigdata).hits.hits;
          if (specData.length > 0) {
            this.assetStatus = 'exhibition';
            this.totalProfit = specData[0]._source.total_profit_total.toFixed(2);
            this.assetData = Array.from([
              specData[0]._source.net_asset_total_begin,
              specData[0]._source.trans_in_amt_total,
              specData[0]._source.trans_out_amt_total,
              specData[0]._source.net_asset_total_avg,
              specData[0]._source.net_asset_total_end
            ])
          } else {
            this.assetStatus = 'empty';
          }
        } else {
          this.assetStatus = 'error';
        }
      });
    },
    showModal(){
      console.log('test')
      this.activeModal=true
    },
    closeModal(){
      this.fadeAnimation=true
      setTimeout(()=>{
        this.activeModal=false
        this.fadeAnimation=false
      },500)
    },
    scrollFunction(){
      let fontSizeString=$('html').css('font-size');
      let numString=fontSizeString.split('').splice(0,fontSizeString.length-2).join('');
      let num=parseFloat(numString);
      if($(document).scrollTop()>=(260*num/75)){
        this.showTimePick=true
        // $('#topTimePick').addClass('fix-top');
        // $('.charts').addClass('margin-top');
      }
      else{
        this.showTimePick=false
        // $('.timePick').removeClass('fix-top');
        // $('.charts').removeClass('margin-top');
      }
    }
  },
  components: {
    'component-header': Header,
    'component-footer': Footer,
    'profit': Profit,
    'return-rate': ReturnRate,
    'my-asset': MyAsset,
    'pro-analysis': ProAnalysis,
    'my-label': MyLabel,
    'stock-ope': StockOpe,
    'zcfx-loadmore': LoadMore
  }
}
</script>

<style scoped>
.asset {
  background: #f6f6f6;
  padding-bottom: 100px;
  padding-top: 88px;
}

.main {
  animation-duration: 200ms;
  animation-name: slide;
}

@keyframes slide {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.timePick {
  height: 78px;
  box-shadow: 0 2px 10px 0 rgba(34, 34, 34, 0.2);
  font-size: 28px;
  padding: 0 10px;
  color: #555;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  background: #fff;
  width: 100%;
}

.timePick li {
  height: 78px;
  line-height: 78px;
  padding: 0 22px;
}

.timePick .active {
  color: #309fea;
  border-bottom: 8px solid #309fea;
  box-sizing: border-box;
}

.container-center{
  padding-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn{
  width: auto;
  height: 64px;
  border-radius: 32px;
  padding: 0 68px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #fff;
}

.orange{
  background: #ff8420;
}

.white{
  background: #fff;
}

.showBottom {
  padding-bottom: 100px;
}

.modal{
  width: 100%;
  height: 1800px;
  position: fixed;
  top: 0;
  z-index: 999999999;
  background: rgba(0,0,0,0.6);
}
.modal-hidden{
  animation-duration: 500ms;
  animation-name: fade;
}
@keyframes fade{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

.modal-dialog{
  width: 610px;
  height: 390px;
  background: #fff;
  border-radius: 12px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  animation-duration: 300ms;
  animation-name: slideUp;
}
@keyframes slideUp{
  from{
    transform: translate(-50%,50%);
    opacity: 0;
  }
  to{
    transform: translate(-50%,-50%);
    opacity: 1;
  }
}



.modal-title{
  width: 100%;
  height: 88px;
  padding: 0 30px;
  box-sizing: border-box;
}
.title-text{
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ddd;
  font-size: 32px;
  color: #808080;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title-text img{
  height: 30px;
}
.modal-content{
  width: 100%;
  height: 200px;
  padding: 0 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.content-text{
  width: 100%;
  font-size: 28px;
  color: #555;
}
.modal-btn{
  width: 100%;
  height: 100px;
  border-top: 1px solid #ddd;
  font-size: 30px;
  color: #369fea;
  display: flex;
  justify-content: center;
  align-items: center;
}
#topTimePick{
  position: fixed;
  top: 88px;
  z-index: 9;
}
a:hover{
  text-decoration: none;
}
</style>
